<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
		<link rel="stylesheet" href="../../styles/common.css" />
		<link rel="stylesheet" href="../../styles/page.css" />
		<style>
			#member-app .notAdmin::after {
				border: 0 !important;

			}
			
			
			.backlog-body {
			    display: block;
			    padding: 5px 10px;
			    background-color: #f8f8f8;
			    color: #999;
			    border-radius: 2px;
			    transition: all .3s;
			    -webkit-transition: all .3s;
			}
			
			h1, h2, h3, h4, h5, h6 {
			    font-weight: 400;
			}
			
			h3 {
			    display: block;
			    font-size: 1.17em;
			    margin-block-start: 1em;
			    margin-block-end: 1em;
			    margin-inline-start: 0px;
			    margin-inline-end: 0px;
			    font-weight: bold;
			}
			p {
			    display: block;
			    margin-block-start: 1em;
			    margin-block-end: 1em;
			    margin-inline-start: 0px;
			    margin-inline-end: 0px;
			}
			
			cite {
			    font-style: normal;
			    font-size: 30px;
			    font-weight: 600;
			    color: #009688;
			}
		</style>
	</head>
	<body>
		<div class="dashboard-container" id="member-app">


			<el-container>



				<el-container style="margin-top: 10px;">

					<el-main style=" margin: 0px 0px 0px 0px;padding: 0px 10px 0px 5px;">
						<div>
							<el-card class="box-card" >
								<div slot="header" class="clearfix" style="height: 10px; padding: 0px;">
									<span style="font-size: 15px; font-weight: 600;">近十日航班异常信息</span>

								</div>
								<div style="padding: 0px;">
									<el-row :gutter="20">
										<el-col :span="12">
											<a class="backlog-body">
												<h3><i class="el-icon-time"></i>航班延误</h3>
												<p><cite>&nbsp;&nbsp;{{exception.delay}}</cite></p>
											</a>

										</el-col>
										<el-col :span="12">

										 <a class="backlog-body">
												<h3>航班取消</h3>
												<p><cite>{{exception.cancel}}</cite></p>
											</a>
										</el-col>
									</el-row>
								</div>
							</el-card>
						</div>
							<el-card class="box-card" style="margin-top: 5px;">
						<div id="main" style="width: 700px;height:500px; margin-top: 50px;"></div>
						</el-card>
					</el-main>
					<el-aside style="width: 450px;height: 1000px;">
						<el-card class="box-card">
							<div slot="header" class="clearfix">
								<span>数据概览</span>
								<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
							</div>
							<div id="bean" style="width: 450px; height: 400px;"></div>
						</el-card>
						
						<el-card class="box-card" style="height: 310PX; margin-top: 10px;">
						  <div slot="header" class="clearfix">
						    <span style="font-size: 15px; font-weight: 600;"><i class="el-icon-user-solid"></i>&nbsp;在线用户</span>
						    <el-button style="float: right; padding: 3px 0" type="text">操作</el-button>
						  </div>
						  <div>
							  <template>
							      <el-table
							        :data="tableData"
							        style="width: 100%">
							        <el-table-column
							          prop="id"
							          label="序号"
							          width="80">
							        </el-table-column>
							        <el-table-column
							          prop="name"
							          label="用户名"
							          width="120">
							        </el-table-column>
							        <el-table-column
							          prop="date"
							          label="登录时间">
							        </el-table-column>
							      </el-table>
							    </template>
						  </div>
						 
						</el-card>
					
					</el-aside>
					
				</el-container>
			</el-container>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="../../plugins/vue/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="../../plugins/element-ui/index.js"></script>
		<!-- 引入axios -->
		<script src="../../plugins/axios/axios.min.js"></script>
		<script src="../../js/request.js"></script>
		<script src="../../api/member.js"></script>
		<script src="../../plugins/echarts.js"></script>
		<script>
			new Vue({
				el: '#member-app',
				data() {
					return {

						tableData: [],
						exception: {}
					}
				},
				mounted() {
					
					getexception().then(res=>{
						
					this.exception=res.data
					})
					
					// 基于准备好的dom，初始化echarts实例
					var main = echarts.init(document.getElementById('main'));
					var myChart = echarts.init(document.getElementById('bean'));
					

					main.showLoading();
					getad().then(res => {
						console.log(res.data)
						var entry = res.data.entry[0];
						var out = res.data.out[0];
						main.hideLoading();
						// 指定图表的配置项和数据
						var opt = {
							title: {
								text: '近十日进出港信息统计'
							},
							tooltip: {},
							legend: {
								data: ['进港', '出港']
							},
							xAxis: {
								data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日']
							},
							yAxis: {},
							series: [{
									name: '进港',
									type: 'bar',
									data: [entry.one, entry.two, entry.three, entry.four, entry.five,
										entry.six, entry.seven, entry.eight, entry.nine, entry.ten
									],
									markPoint: {
										data: [{
												type: 'max',
												name: '高峰'
											},
											{
												type: 'min',
												name: '低峰'
											}
										]
									}
								},
								{
									name: '出港',
									type: 'bar',
									data: [out.one, out.two, out.three, out.four, out.five, out.six, out
										.seven, out.eight, out.nine, out.ten
									],
									markPoint: {
										data: [{
												type: 'max',
												name: '高峰'
											},
											{
												type: 'min',
												name: '低峰'
											}
										]
									}

								}
							]
						};
						// 使用刚指定的配置项和数据显示图表。
						main.setOption(opt);
					});



					myChart.showLoading();
					getarea().then(res => {
						console.log(res)
						myChart.hideLoading();

						option = {
							title: {
								text: '航班信息统计',
								left: 'center'
							},
							tooltip: {
								trigger: 'item',
								formatter: '{a} <br/>{b} : {c} ({d}%)'
							},
							legend: {
								orient: 'vertical',
								left: 'left',
								data: ['国内', '国际', '混合', '地区']
							},
							series: [{
								name: '航班数',
								type: 'pie',
								radius: '55%',
								center: ['50%', '60%'],
								data: [{
										value: res.data.domestic,
										name: '国内'
									},
									{
										value: res.data.international,
										name: '国际'
									},
									{
										value: res.data.mix,
										name: '混合'
									},
									{
										value: res.data.region,
										name: '地区'
									}

								],
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						};

						let currentIndex = -1;

						setInterval(function() {
							var dataLen = option.series[0].data.length;
							// 取消之前高亮的图形
							myChart.dispatchAction({
								type: 'downplay',
								seriesIndex: 0,
								dataIndex: currentIndex
							});
							currentIndex = (currentIndex + 1) % dataLen;
							// 高亮当前图形
							myChart.dispatchAction({
								type: 'highlight',
								seriesIndex: 0,
								dataIndex: currentIndex
							});
							// 显示 tooltip
							myChart.dispatchAction({
								type: 'showTip',
								seriesIndex: 0,
								dataIndex: currentIndex
							});
						}, 1000);
						myChart.setOption(option)
					})





				},
				created() {


				},

				methods: {
					async init() {


					},





				}
			})
		</script>
	</body>
</html>
